import { _decorator, Button, Component, find, instantiate, log, Node, Prefab, Size, Toggle, ToggleContainer, tween, v3, view } from 'cc';
import { UIBase } from './UIBase';
import { UIRoot } from './UIRoot';
import { resMgr } from './Res/ResMgr';
import { PrefabMgr } from './Res/SpecialResMgr';
import { Game } from './Game';
import { gameConfig } from './Configs';
const { ccclass, property } = _decorator;

@ccclass('Menu')
export class Menu extends UIBase {

    @property(Button)
    playBtn: Button = null;

    private _viewSize: Size = view.getDesignResolutionSize();
    toggleGroupContainer: ToggleContainer = null;

    start() {
        this.node.setPosition(v3(this._viewSize.width, 0, 0));
        tween(this.node)
            .to(0.2, { position: v3(0, 0, 0) })
            .start()
        let roleToggleGroupNode = this.node.getChildByName("roleToggleGroup");
        this.toggleGroupContainer = roleToggleGroupNode.getComponent(ToggleContainer);

        this.playBtn.node.on("click", (btnComp: Button) => {
            let roleIndex = this.onPlay();
            gameConfig.roleIndex = roleIndex;
            console.log("选中了第" + (roleIndex + 1) + "个角色");
            //创建Game界面
            let gamePre = resMgr.getMgr<PrefabMgr>("PrefabMgr").getRes<Prefab>("Game");
            let gameNode = instantiate(gamePre);
            gameNode.parent = find("Canvas");
            //设置Game页面的层级，应该显示在MainUI的下面，MainUI应该一直显示在最上面
            gameNode.setSiblingIndex(-100);
            // let gameTs = gameNode.getComponent(Game);
            // gameTs.init(roleIndex);
            UIRoot.instance.openUI("MainUI");
            UIRoot.instance.closeUI("Menu");

        }, this)
    }

    update(deltaTime: number) {
    }

    onPlay() {
        let togItems: Toggle[] = this.toggleGroupContainer.toggleItems;
        for (let i = 0; i < togItems.length; i++) {
            if (togItems[i].isChecked == true) {
                return i;
            }
        }
        return -1;
    }

}


